<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script language="JavaScript" type="text/javascript" src="jquery-1.4.2.min.js" ></script>
	<script language="JavaScript" type="text/javascript" src="jquery.styledButton.js" ></script>
	<link rel="stylesheet" href="styled-button.css" type="text/css" />

	<script type="text/javascript">
		/*$(document).ready(function () {
			$("span").css({
				 'padding' : '5px 20px',
				 'font-size' : '14px'
			});

			$("span.alone").styledButton({
				'orientation' : 'alone',
				'action' : function () { alert( 'omfg' ) },
				'display' : 'block'
			});

			$("span.left").styledButton({
				'orientation' : 'left'
			});
			$("span.center").styledButton({
				'orientation' : 'center',
				'action' : { 'on' :function () {
								alert( "You've turned on the button" );
							},
							'off' : function () {
								alert( "You've turned it off" );
							} },
				'toggle' : true
			});
			$("span.checked").styledButton({
				'orientation' : 'center',
				'role' : 'checkbox',
				'checked' : true
			});
			$("span.tell1").styledButton({
				'orientation' : 'right',
				'action' : function () { alert( $("span.checked").val() ) }
			});
			$("span.unchecked").styledButton({
				'orientation' : 'left',
				'role' : 'checkbox',
				'checkboxValue' : { 'on' : "custom on!",
									'off' : "custom off!" }
			});
			$("span.tell2").styledButton({
				'orientation' : 'right',
				'action' : function () { alert( $("span.unchecked").val() ) }
			});

			$("span.bla").styledButton({
				'orientation' : 'right',
				'dropdown' : { 'element' : 'ul' },
				'role' : 'select',
				'defaultValue' : 'default value',
				'name' : 'testSelect',
				'clear' : true
			});
			$("span.dummyDrop").styledButton({
				'orientation' : 'alone',
				'dropdown' : { 'element' : 'ul' },
				'role' : 'select',
				'defaultValue' : 'default value',
				'name' : 'dummy',
				'clear' : true
			});

			$("span.teller").styledButton({
				'action' : function () { alert( $("span.bla").val() ) },
				'orientation' : 'left',
				'clear' : true
			});

		} );*/

		$(document).ready(function () {
			$("span").css({'padding' : '5px 20px', 'font-size' : '14px'});
			$("span.alone").styledButton();
		});
	</script>

	<title>buttons a la Google</title>
</head>

<body>
	<span class="alone">Alone 65465 4654f65d s4g65df4g65d4g</span>
	<span class="left"><em>Left (dumb)</em></span><span class="center">Center</span><span class="checked">checked</span><span class="tell1">tell value</span>

	<span class="unchecked">checkbox</span><span class="tell2">tell 2nd value</span>
	<br />
	<span class="teller">Select value?</span><span class="bla" onchange="alert( 'onchange fired' )">Select ⇣
		<ul>
			<li>drop 1</li>
			<li>drop 2</li>
		</ul>
	</span>
	<span class="dummyDrop"><strong>dropdown</strong>
		<ul>
			<li>option 1</li>
			<li>option 2</li>
		</ul>
	</span>
</body>
</html>